<template>
  <div class="about">
    <add @add="add" />
    <!-- 添加子组件 -->
    <list :list="list" @remove="remove" :num1="num1" :num2="num2" />
    <!-- 列表子组件 -->
    <!-- <list :list="list" />
    <list :list="list" /> -->
  </div>
</template>
<script>
import list from "../components/List.vue";
import add from "../components/Add.vue";
//引入
export default {
  data() {
    return {
      list: [
        {
          title: "今天学会子组件和父子组件传值",
          status: false,
        },
        {
          title: "吃饭",
          status: false,
        },
        {
          title: "睡觉",
          status: true,
        },
        {
          title: "上钻石",
          status: false,
        },
      ],
    };
  },
  components: {
    list,
    add,
  },
  //注册
  methods: {
    add(val) {
      this.list.push({ title: val, status: false });
    },
    //添加

    remove(val) {
      // 接收的val就是子组件在调用这个事件的时候 传过来的下标
      this.list.splice(val, 1);
    },
  },

  computed: {
    num1() {
      let arr = this.list.filter((item) => {
        return item.status == false;
      });
      return arr.length;
    },
    num2() {
      let arr = this.list.filter((item) => {
        return item.status == true;
      });
      return arr.length;
    },
  },
};
</script>
